import { useEffect, useRef, useState } from "react"

export default function TestReactSource() {
    // const [num, setNum] = useState(111)

    // useEffect(() => {
    //     console.log(333)
    // })
    // return <div>
    //     <Abin name="abin" age={20}/>
    //     <input type="text" placeholder="请输入"/>
    // </div>
    const [num, setNum] = useState(0);
    const timerRef = useRef<NodeJS.Timer>();

    useEffect(() => {
        timerRef.current = setInterval(() => {
            setNum(num => num + 1);
        }, 100);
    }, []);

    return <div>
        {num}
        <button onClick={() => {
            clearInterval(timerRef.current!);
        }}>停止</button>
    </div>
}


interface AbinProps {
    name: string
    age: number
}
function Abin(props: AbinProps) {
    const { name, age } = props
    return <>
        <h2>{name}</h2>
        <h3>{age}</h3>
    </>
}